﻿@namespace BlazorDemo.Pages.CaseViews
@inherits DemoWithResizableComponent

<div class="demo-description">
    <h2>
        <DemoNavLink Link="SpinEdit#NullableValue" />Nullable Value and Placeholder
    </h2>
    <p>
        Do any of the following to clear the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxSpinEdit-1">Spin Edit</a> (set its value to null):
    </p>
    <ul>
        <li>
            Delete the value in the editor.
        </li>
        <li>
            Click the <b>Clear</b> button. This button is displayed when you set the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxSpinEdit-1.ClearButtonDisplayMode">ClearButtonDisplayMode</a> property to <b>Auto</b>.
        </li>
    </ul>
    <p>
        Use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxSpinEdit-1.NullText">NullText</a> property to display placeholder text in the Spin Edit when its value is null.
    </p>
</div>



<div class="card demo-card demo-card-shadow">
    <div class="card-header">
        @{
            string title = NumericValue != null ? NumericValue.ToString() : "null";
        }
        <DemoToolbar @bind-SelectedSize="SizeMode" Title="Clear the value" />
    </div>
    <div class="card-body mw-480">
        <DxSpinEdit @bind-Value="@NumericValue"
                    ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto"
                    NullText="Type a value..."
                    BindValueMode="BindValueMode.OnInput"
                    SizeMode="@SizeMode">
             
        </DxSpinEdit>
    </div>
</div>

<CodeSnippet_Editor_SpinEdit_NullableValue/>

@code {
    int? NumericValue { get; set; } = 721;
}
